<template>
	<view class="content">
		<page-meta :page-style="'overflow:'+(gameShow?'hidden':'visible')"></page-meta>
		<view class="form">
			<view class="form-item">
				<view class="label">项目分类</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="staticSePop(1)">
					<view class="value" v-if="!formData.game_name">请选择项目分类</view>
					<view class="pitchValue" v-else>{{formData.game_name}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">性别要求</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="staticSePop(2)">
					<view class="value" v-if="!formData.sex_name">请选择性别要求</view>
					<view class="pitchValue" v-else>{{formData.sex_name}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view>
			<view class="form-item border-bm padd-bm tn-flex tn-flex-col-center tn-flex-row-between">
				<view class="label">期望局数</view>
				<view class="counter  tn-flex tn-flex-col-center">
					<image src="/static/index/subtractIcon.png" mode="" @click="subNum(2)"></image>
					<text class="num">{{formData.exp_num}}</text>
					<image src="/static/index/addIcon.png" mode="" @click="subNum(1)"></image>
				</view>
			</view>
			<block v-for="(item,index) in tagsList" :key="index">
				<view class="form-item">
					<view class="label">{{item.name}}</view>
					<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between"
						@click="tagsClick(item,index)">
						<view class="value" v-if="!formData.tags[index]">请选择{{item.name}}</view>
						<view class="pitchValue" v-else>{{formData.tags[index].option}}</view>
						<image src="/static/index/sj1.png" mode="" class="img1"></image>
					</view>
				</view>
			</block>
			<!-- <view class="form-item" v-if="formData.is_up_field == 1">
				<view class="label">是否提供包上分服务</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="staticSePop(3)">
					<view class="value" v-if="!formData.is_up_name">请选择是否提供包上分服务</view>
					<view class="pitchValue" v-else>{{formData.is_up_name}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view> -->
			<view class="form-item">
				<view class="label">单价区间</view>
				<view class="section  tn-flex tn-flex-col-center tn-flex-row-between">
					<input type="text" v-model="formData.min_price" placeholder="请输入价格" />
					<view class="xian"></view>
					<input type="text" v-model="formData.max_price" placeholder="请输入价格" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">期望时间</view>
				<view class="select border-bm tn-flex tn-flex-col-center tn-flex-row-between" @click="timeShow = true">
					<view class="value" v-if="!formData.exp_date">请选择期望时间</view>
					<view class="pitchValue" v-else>{{formData.exp_date}}</view>
					<image src="/static/index/sj1.png" mode="" class="img1"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">其他要求</view>
				<view class="textarea">
					<textarea placeholder="如：双排/三排/五排/匹配，来个国服等" placeholder-class="value"
						v-model="formData.other"></textarea>
				</view>
			</view>

			<view class="btn" @click="submit">发布</view>
		</view>
		<!-- 游戏分类 性别 上分服务-->
		<tn-popup v-model="gameShow" mode="bottom">
			<picker-w @confirm="typeConfirm" :list="gamePopList" :selectPopTitle="selectPopTitle"
				keyName="name"></picker-w>
		</tn-popup>

		<!-- 动态表单下拉选择 -->
		<tn-popup v-model="tagsShow" mode="bottom">
			<picker-w @confirm="tagsPopConfirm" :list="tagsPopList" keyName="option"></picker-w>
		</tn-popup>



		<!-- 时间 -->
		<tn-picker mode="time" :params="params" v-model="timeShow" @confirm="timeConfirm"></tn-picker>
	</view>
</template>

<script>
	let gameList = [] //游戏分类数据
	let sexTypeList = [{
			name: '男',
			id: 1
		},
		{
			name: '女',
			id: 2
		}
	]
	let gradeList = [{
		name: '是',
		id: 1
	}, {
		name: '否',
		id: 0
	}] //上分服务
	export default {
		data() {
			return {
				selectPopTitle: '项目分类',
				gameShow: false,
				gamePopList: [], //弹窗显示数据
				tagsPopList: [], //弹窗动态表单数据
				tagsList: [], //动态表单
				tagsIndex: 0, //点击的哪个动态表单
				tagsShow: false,
				timeShow: false,
				endTimeShow: false,
				formData: {
					game_id: '', //游戏分类id
					game_name: '', //游戏分类名称
					sex: '', //性别
					sex_name: '', //性别
					is_up: '', //是否包上分
					is_up_field: '', // 是否显示上分服务
					is_up_name: '', //是否包上分
					min_price: '0', //单价  - 小
					max_price: '50', //单价  - 大
					exp_date: '', //开始时间
					other: '', //其他要求
					tags: [],
					exp_num: 1 //期望局数
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true
				},
				loadingPage: true,

			}
		},
		onLoad(option) {
			this.getGame()
		},
		methods: {
			// 提交
			async submit() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_matching/store',
						data: {
							...this.formData
						}
					})
					console.log(result)
					uni.showToast({
						title: result.data.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url:"issue_user?id="+result.data.data.play_matching_id
						})
					}, 800)
				} catch (e) {
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					})
					//TODO handle the exception
				}

			},
			// 获取游戏分类
			async getGame() {
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play_game/game'
				})
				gameList = result.data.data
				this.loadingPage = false

			},
			// 获取游戏标签
			async getTags(game_id) {
				let result = await this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play_game/mat_tags',
					data: {
						game_id
					}
				})
				this.tagsList = result.data.data


			},

			// 点击动态表单选项
			tagsClick(item, index) {
				this.tagsPopList = item.options
				this.tagsIndex = index
				this.tagsShow = true

			},
			// 动态设置弹出层title
			staticSePop(type) {
				if (type == 1) {
					this.selectPopTitle = '项目分类'
					this.gamePopList = gameList
				} else if (type == 2) {
					this.selectPopTitle = '性别要求'
					this.gamePopList = sexTypeList
				} else if (type == 3) {
					this.selectPopTitle = '上分服务'
					this.gamePopList = gradeList
				}
				this.gameShow = true
			},



			// pop确认框(游戏分类 服务类型 上分服务)
			typeConfirm(e) {
				console.log(e)
				if (this.selectPopTitle == '游戏分类') {
					this.formData.game_name = e.name
					this.formData.game_id = e.id
					this.formData.is_up_field = e.is_up_field
					if (e.is_up_field == 0) {
						this.formData.is_up = 2
					}
					this.getTags(e.id)
				} else if (this.selectPopTitle == '性别要求') {
					this.formData.sex_name = e.name
					this.formData.sex = e.id
				} else if (this.selectPopTitle == '上分服务') {
					this.formData.is_up_name = e.name
					this.formData.is_up = e.id
				}
				this.gameShow = false
			},
			// 动态表单
			tagsPopConfirm(e) {
				let data = this.tagsList[this.tagsIndex]
				let obj = {
					id: data.id,
					name: data.name,
					option: e.option
				}
				this.formData.tags[this.tagsIndex] = obj
				this.tagsShow = false

			},
			// 期望局数
			subNum(type) {
				if (type == 1) {
					this.formData.exp_num++
				} else {
					if (this.formData.exp_num <= 1) return
					this.formData.exp_num--
				}
			},

			// 时间(start)
			timeConfirm(e) {
				console.log(e)
				let {
					year,
					month,
					minute,
					hour,
					day
				} = e
				this.formData.exp_date = `${year}-${month}-${day} ${hour}:${minute}:00`
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
    background: #ffffff;
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.3);
		}

		.border-bm {
			border-bottom: 1px solid #efefef;
		}

		.padd-bm {
			padding-bottom: 44rpx;
		}

		.value {
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}

		.pitchValue {
			font-size: 32rpx;
			color: #333333;
		}

		.form {
			.form-item {
				margin-bottom: 40rpx;

				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				.ftitle {
					font-size: 24rpx;
					font-weight: 500;
					color: #CCCCCC;
					margin-top: 12rpx;
				}

				// 选择
				.select {
					height: 75rpx;

					.img1 {
						width: 32rpx;
						height: 18rpx;
					}

					input {
						flex: 1;
						color: #FFFFFF;
					}
				}

				// 区间
				.section {
					margin-top: 28rpx;

					input {
						width: 305rpx;
						height: 93rpx;
						background:#efefef;
						border-radius: 20rpx;
						color: #333333;;
						padding: 0 30rpx;
					}

					.xian {
						width: 32rpx;
						height: 1px;
						background-color: #CCCCCC;
					}
				}

				.counter {
					image {
						width: 48rpx;
						height: 48rpx;
					}

					.num {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						margin: 0 16rpx;
					}
				}


				.textarea {
					background-color: #efefef;
					border-radius: 20rpx;
					padding: 24rpx;
					margin-top: 28rpx;

					textarea {
						color: #333333;
					}
				}
			}

			.btn {
				height: 88rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 20rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;

			}
		}


	}
</style>
